<template>
  <div class="pages informationarticleLook">
    <div class="pageLevel">
      <!-- 表单 -->
      <div class="from_main from">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
           <el-form-item class="fotter_button" >
             <el-button type="primary" size="small" @click="goback()">返 回</el-button>
            <el-button type="primary" v-if="setRole('删除')" size="small" @click="detele()">删 除</el-button>
            
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-input placeholder="请输入标题" :disabled="prohibit" clearable v-model="ruleForm.title" maxlength="50" minlength="20" size="small"></el-input>
          </el-form-item>

          <el-form-item v-if="ruleForm.dialogImageUrl.length!=0" label="封面" style="margin-bottom:50px" prop="dialogImageUrl">
            <div v-for="(item,index) in ruleForm.dialogImageUrl" style="width:150px;height:150px; display:inline-block;margin-right:10px;margin-top:40px">
              <img :src="item" alt="" style="width:100%;height:100%;">
            </div>
          </el-form-item>
          <el-form-item label="所属分类">
            <el-radio-group v-model="ruleForm.classifications">
              <el-radio label="0" disabled>婴儿游泳</el-radio>
              <el-radio label="1" disabled>产后护理</el-radio>
              <el-radio label="2" disabled>儿童推拿</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="内容" prop="lists" :disabled="prohibit">
            <div :disabled="prohibit" id="editorElem" style="width: 550px;height:500px;margin-top:50px"></div>
          </el-form-item>

         
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import E from "wangeditor";
import { getMessageDetail, deleteMessage, uploadFile ,getFile} from "@/api";
import { mapState } from "vuex";
import util from '@/util'
export default {
  computed: mapState(["power"]),
  name: "editor",
  data() {
    return {
      content: "",
      prohibit: true,
      ruleForm: {
        title: "",
        //图片信息
        classifications:'',
        dialogImageUrl: []
      },
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          {
            min: 20,
            max: 50,
            message: "长度在 20 到 50 个字符",
            trigger: "blur"
          }
        ],

        dialogImageUrl: [
          {
            required: true,
            message: "请选择封面",
            trigger: "blur"
          }
        ]
      },

      dialogVisible: false
    };
  },
  mounted() {
    this.edit();
    this.lookartcle();
  },
  methods: {
      //配置权限
    setRole (key) {
      return util.selectTitle(this.power, key)
     },
    // 查看咨询-文
    lookartcle() {
      let data = {
        id: util.getQuery('ids')
      };
      getMessageDetail(data).then(res => {
        this.ruleForm.title = res.data.title;
        this.ruleForm.dialogImageUrl = res.data.imageUrlList;
        this.editorContent = res.data.content;
        this.editor.txt.html(this.editorContent);
        this.ruleForm.classifications =res.data.classify.toString();
      });
    },

    // 发布
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          history.back();
        } else {
          return false;
        }
      });
    },
    detele() {
      this.$confirm("确定要删除吗?", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false
      })
        .then(() => {
          let data = {
            id: util.getQuery('ids')
          };
          deleteMessage(data).then(res => {
            if(res.code=="200"){
              this.$message({
              type: "success",
              message: "删除成功!"
             });
             history.back();
            }else{
              this.$message({
              type: "error",
              message: res.msg
            });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
     goback(){
     history.back();
     },
    // 编辑器
    edit() {
      this.editor = new E("#editorElem");
      this.editor.customConfig.onchange = html => {
        this.editorContent = html;
      };
      this.editor.customConfig.zIndex = 100;
      this.editor.customConfig.menus = [
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        // "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        // 'backColor',  // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        // 'emoticon',  // 表情
        "image", // 插入图片
        // "table", // 表格
        // 'video',  // 插入视频
        // 'code',  // 插入代码
        "undo", // 撤销
        "redo" // 重复
      ];
      this.editor.customConfig.customUploadImg = (files, insert) => {
        var data = new FormData();
        data.append("file", files[0], files[0].name);
        uploadFile(data).then(res => {
          insert(`${getFile}?id=${res.data.id}`);
        });
      };
      this.editor.create();
    },
    // 图片上传
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error("上传图片格式错误!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    },
    uploadSectionFile2(param) {
      var fileObj = param.file;
      // param.file.name='001'
      var data2 = new FormData();
      data2.append("file", fileObj);
      uploadFile(data2).then(res => {
        this.ruleForm.dialogImageUrl.push(`${getFile}?id=${res.data.id}`);
      });
    },
    // 图片信息
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.ruleForm.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>
<style scoped>
.from_main{
    margin-top:20px;
}
.from_main .el-input {
  width: 350px;
}
</style>
<style>
a {
  text-decoration: none;
}
.from .el-form-item__label {
  width: 135px !important;
}
.from p {
  width: 100%;
  color: #444;
  font-size: 14px;
  border-bottom: none !important;
  padding-bottom: 10px;
}
</style>
